<template>
  <div>
    <div class="whole_top">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="input" style="width: 240px" placeholder="设备名称/设备编码" clearable />
        </el-col>
        <el-col :span="6">
          <el-button>查询</el-button>
          <el-button @click="handleAdd" style="background-color: #17b3a3; color: white;">新增冰箱</el-button>
          <el-button @click="handleA">容器组管理</el-button>
        </el-col>
        <el-col :span="8">
          <el-button @click="handleB">冻存架(分区)管理</el-button>
          <el-button @click="handleC">冻存盒管理</el-button>
          <el-button @click="handleExport">导出EXCEL</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 内容 -->
    <div class="el-row" style="margin-left: -5px; margin-right: -5px; margin-top: 40px;">
      <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;" v-for="item in equipmentList"
        :key="item.id">
        <div class="el-card is-always-shadow" style="margin-bottom: 10px;">
          <div class="el-card__body" style="padding: 0px;">
            <div class="el-row">
              <div class="el-col el-col-8">
                <template v-if="item.photo">
                  <img :src="item.photo" alt="" style="width: 100px; height: 110px;">
                </template>
              </div>
              <div class="el-col el-col-16">
                <p style="font-weight: bold;">{{ item.name }}({{ item.brand }})></p>
                <p>编码: BS-{{ item.code }}</p>
                <p>型号：{{ item.equipmentModelName }}</p>
                <p>层列：
                  <span style="color: lightseagreen;"> {{ item.rowNums }} * {{ item.columnNums }} / 长宽高：{{ item.depth }}
                    *
                    {{ item.width
                    }} * {{ item.height }}</span>
                </p>
              </div>
              <div class="el-col el-col-24">
                <div style="margin-left: 10px;">
                  <table style="width: 100%;">
                    <tr>
                      <td>冻存架：
                        <span style="color: lightseagreen;">{{ item.shelfCnt }}</span>
                      </td>
                      <td>冻存盒：
                        <span style="color: lightseagreen;">{{ item.boxCnt }}</span>
                      </td>
                      <td>
                        样本：
                        <span style="color: lightseagreen;">{{ item.sampleCnt }}</span>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <div class="bottom clearfix"
                style="text-align: center; margin-left: 80px; margin-top: 15px; margin-bottom: 10px;">
                <div class="el-button-group" size="mini">
                  <el-button type="button" @click="handleEdit(item.id)" size="mini"
                    class="el-button el-button--plain el-button--mini">
                    <span>编辑</span>
                  </el-button>
                  <el-button type="button" size="mini" class="el-button el-button--primary el-button--mini">
                    <span>打开冰箱</span>
                  </el-button>
                  <el-button type="button" @click="handleDelete(item.id)" size="mini"
                    class="el-button el-button--plain el-button--mini">
                    <span>删除</span>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 分页 -->
    <page :query="query" :total="total" @size-change="sChange" @page-change="pChange"></page>
    <!-- 弹窗 -->
    <el-dialog title="修改" v-model="dialogVisible" width="53%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm" style="margin-left: 10px;"
        label-width="auto">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="容器型号" prop="modeName" label-position="right">
              <el-input v-model="ruleForm.modeName" disabled style="max-width: 400px" placeholder="设备型号">
                <template #append>
                  <el-button type="text" @click="handleModel" :icon="Search"></el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容器组" prop="groupName" label-position="right">
              <el-input v-model="ruleForm.groupName" disabled style="max-width: 400px" placeholder="容器组">
                <template #append>
                  <el-button type="text" @click="handleGroup" :icon="Search"></el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="容器编码" prop="code" label-position="right">
              <el-input v-model="ruleForm.code" style="max-width: 400px" placeholder="编码不可重复"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容器名称" prop="name" label-position="right">
              <el-input v-model="ruleForm.name" style="max-width: 400px" placeholder="名称不可重复"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="品牌" prop="brand" label-position="right">
              <el-input v-model="ruleForm.brand" style="max-width: 400px" placeholder="品牌"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容器型号" prop="modelVersion" label-position="right">
              <el-input v-model="ruleForm.modelVersion" style="max-width: 400px" placeholder="型号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="类型" prop="item" label-position="right">
              <el-select v-model="ruleForm.item" placeholder="请选择" size="large" style="width: 240px">
                <el-option :value="1" label="立式"></el-option>
                <el-option :value="2" label="卧式"></el-option>
                <el-option :value="3" label="液氮罐"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="位置码类型" prop="encodingType" label-position="right"> <!-- 交换prop -->
              <el-select v-model="ruleForm.encodingType" placeholder="请选择" size="large" style="width: 240px">
                <el-option :value="1" label="纯数字"></el-option>
                <el-option :value="2" label="混合"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="层数" prop="rowNums" label-position="right">
              <el-input-number v-model="ruleForm.rowNums" :min="1" :max="10" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列数" prop="columnNums" label-position="right">
              <el-input-number v-model="ruleForm.columnNums" :min="1" :max="10" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="宽度" prop="width" label-position="right">
              <el-input-number v-model="ruleForm.width" :min="1" :max="10" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="深度" prop="depth" label-position="right">
              <el-input-number v-model="ruleForm.depth" :min="1" :max="10" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="高度" prop="height" label-position="right">
              <el-input-number v-model="ruleForm.height" :min="1" :max="10" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条形码" prop="barcode" label-position="right">
              <el-input v-model="ruleForm.barcode" style="max-width: 400px" placeholder="类型"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="二维码" prop="barcode2" label-position="right">
              <el-input v-model="ruleForm.barcode2" style="max-width: 400px" placeholder="二维码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="硬件编码" prop="hardcode" label-position="right">
              <el-input v-model="ruleForm.hardcode" style="max-width: 400px" placeholder="硬件编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="生产日期" prop="produceDate" label-position="right">
              <el-date-picker v-model="ruleForm.produceDate" type="date" placeholder="生产日期" :formatter="Data" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用日期" prop="useDate" label-position="right">
              <el-date-picker v-model="ruleForm.useDate" type="date" placeholder="使用日期" :formatter="Data" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="有效日期" prop="validityDate" label-position="right">
              <el-date-picker v-model="ruleForm.validityDate" type="date" placeholder="有效日期" :formatter="Data" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否大规格" prop="isLargeSpec" label-position="right"> <!-- 交换prop -->
              <el-select v-model="ruleForm.isLargeSpec" placeholder="请选择" size="large" style="width: 240px">
                <el-option :value="1" label="普通"></el-option>
                <el-option :value="2" label="大规格"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="状态" prop="state" label-position="right">
              <el-radio-group v-model="ruleForm.state">
                <el-radio :value="1" label="启用"></el-radio>
                <el-radio :value="2" label="禁用"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序码" prop="sortCode" label-position="right">
              <el-input-number v-model="ruleForm.sortCode" :min="1" :max="10" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark" label-position="right">
          <el-input v-model="ruleForm.remark" type="textarea" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 弹框中容器型号选择 -->
    <el-dialog title="选择容器型号" v-model="dialogVisible2" width="50%">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-input v-model="input" placeholder="请输入容器型号" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchModel">查询</el-button>
        </el-col>
      </el-row>
      <el-table :data="modelList" style="width: 100%">
        <el-table-column prop="photo" label="图片" width="80">
          <template #default="scope">
            <img :src="scope.row.photo" alt="" style="width: 50px; height: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="modeCode" label="型号编号" width="160"></el-table-column>
        <el-table-column prop="modeName" label="型号名称" width="160"></el-table-column>
        <el-table-column prop="eqiupmentTypeName" label="设备类型" width="200"></el-table-column>
        <el-table-column prop="brands" label="品牌" width="120"></el-table-column>
        <el-table-column prop="model" label="型号" width="120"></el-table-column>
        <el-table-column prop="structure" label="结构" width="80"></el-table-column>
        <el-table-column prop="lowTemperature" label="低温" width="80"></el-table-column>
        <el-table-column prop="hightTemperature" label="高温" width="80"></el-table-column>
        <el-table-column prop="remark" label="备注" width="80"></el-table-column>
        <el-table-column prop="spareData" label="备用信息" width="200"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="AddSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination layout="prev, pager, next" :total="total2" />
    </el-dialog>
    <!-- 弹框中容器组选择 -->
    <el-dialog title="选择容器组" v-model="dialogVisible3" width="50%">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-input v-model="input2" placeholder="请输入容器组" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchGroup">查询</el-button>
        </el-col>
      </el-row>
      <el-table :data="groupList" style="width: 100%">
        <el-table-column prop="groupCode" label="组编码" width="160"></el-table-column>
        <el-table-column prop="groupName" label="组名称" width="160"></el-table-column>
        <el-table-column prop="managerName" label="管理员" width="200"></el-table-column>
        <el-table-column prop="groupAddress" label="组地址" width="120"></el-table-column>
        <el-table-column prop="remark" label="备注" width="120"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="AddSelect2(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination layout="prev, pager, next" :total="total3" />
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { getEquipment, deleteEquipment, addEquipmentmodel, addEquipmentgroup, addSave,editEquipment,editSave } from '@/api/equipment'
import {  Search } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus'
import page from '@/components/page.vue'
import type { FormInstance, FormRules } from 'element-plus'
import moment from "moment"; // 导入moment

const router = useRouter()

const equipmentList = ref([])
// 分页
const total = ref(0)
const total2 = ref(0)
const total3 = ref(0)
const query = reactive({
  page: 1,
  limit: 12,
})
//新增中
const AddQuery = reactive({
  page: 1,
  limit: 10,
  t: new Date().getTime(),
  key: ''
})
const input = ref('')
const input2 = ref('')
// 弹窗
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const dialogVisible3 = ref(false)
// 新增表格
const modelList = ref([])
const groupList = ref([])
const title = ref('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  modeName: '',
  groupName: '',
  code: '',
  name: '',
  brand: '',
  modelVersion: '',
  item: '',
  isLargeSpec: '',
  encodingType: '',
  rowNums: 1 as number,
  columnNums: 1 as number,
  width: 1,
  depth: 1,
  height: 1,
  barcode: '',
  barcode2: '',
  hardcode: '',
  produceDate: '',
  useDate: '',
  validityDate: '',
  state: 1,
  sortCode: 1,
  remark: '',
  t: new Date().getTime(),
  equipmentModelId: '',
  equipmentGroupId: '',
})

const rules = reactive<FormRules<RuleForm>>({
  modeName: [
    { required: true, message: '请输入容器型号', trigger: 'blur' },
  ],
  groupName: [
    { required: true, message: '请输入容器组', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入编码', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  brand: [
    { required: true, message: '请输入品牌', trigger: 'blur' },
  ],
  modelVersion: [
    { required: true, message: '请输入型号', trigger: 'blur' },
  ],
  item: [
    { required: true, message: '请输入项目', trigger: 'blur' },
  ],
  isLargeSpec: [
    { required: true, message: '请输入是否大规格', trigger: 'blur' },
  ],
  encodingType: [
    { required: true, message: '请选择位置码类型', trigger: 'blur' },
  ],
  rowNums: [
    { required: true, message: '请输入行号', trigger: 'blur' },
  ],
  columnNums: [
    { required: true, message: '请输入列号', trigger: 'blur' },
  ],
  width: [
    { required: true, message: '请输入宽度', trigger: 'blur' },
  ],
  depth: [
    { required: true, message: '请输入深度', trigger: 'blur' },
  ],
  height: [
    { required: true, message: '请输入高度', trigger: 'blur' },
  ],
  produceDate: [
    { required: true, message: '请输入生产日期', trigger: 'blur' },
  ],
  useDate: [
    { required: true, message: '请输入使用日期', trigger: 'blur' },
  ],
  validityDate: [
    { required: true, message: '请输入有效日期', trigger: 'blur' },
  ],
  state: [
    { required: true, message: '请输入状态', trigger: 'blur' },
  ],
  sortCode: [
    { required: true, message: '请输入排序码', trigger: 'blur' },
  ],

})

// 函数调用=============

//处理时间戳
// 时间戳转换
function Data(val: any) {
  return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
}

function getList() {
  getEquipment(query).then(res => {
    console.log(res, '调去数据')
    equipmentList.value = res.page.list
    total.value = res.page.totalCount
  })
}

// 编辑
function handleEdit(id: any) {
  editEquipment(id).then(res => {
    console.log(res, '编辑数据')
    ruleForm.modeName = res.equipment.equipmentModelName
    ruleForm.groupName = res.equipment.equipmentGroupName
    ruleForm.code = res.equipment.code
    ruleForm.name = res.equipment.name
    ruleForm.brand = res.equipment.brand
    ruleForm.modelVersion = res.equipment.modelVersion
    ruleForm.item = res.equipment.item
    ruleForm.isLargeSpec = res.equipment.isLargeSpec
    ruleForm.encodingType = res.equipment.encodingType
    ruleForm.rowNums = res.equipment.rowNums
    ruleForm.columnNums = res.equipment.columnNums
    ruleForm.width = res.equipment.width
    ruleForm.depth = res.equipment.depth
    ruleForm.height = res.equipment.height
    ruleForm.barcode = res.equipment.barcode
    ruleForm.barcode2 = res.equipment.barcode2
    ruleForm.hardcode = res.equipment.hardcode
    ruleForm.produceDate = Data(res.equipment.produceDate)
    ruleForm.useDate = Data(res.equipment.useDate)
    ruleForm.validityDate = Data(res.equipment.validityDate)
    ruleForm.state = res.equipment.state
    ruleForm.sortCode = res.equipment.sortCode
    ruleForm.remark = res.equipment.remark
    ruleForm.equipmentModelId = res.equipmentModel.id
    ruleForm.equipmentGroupId = res.equipmentGroup.id

  })
  dialogVisible.value = true
  title.value = '编辑'

}


// 新增
function handleAdd() {
  dialogVisible.value = true
  title.value = '新增'
  // 先重置表单
  nextTick(() => {
    ruleFormRef.value?.resetFields()
  })
}
// 新增确定
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (title.value === '新增') {
        try {
          // 构造完整请求数据
          const payload = {
            ...ruleForm,
            createOn: moment().format('YYYY-MM-DD HH:mm:ss'), // 添加创建时间
            modifiedOn: moment().format('YYYY-MM-DD HH:mm:ss'), // 添加修改时间
            produceDate: ruleForm.produceDate ? moment(ruleForm.produceDate).format('YYYY-MM-DD HH:mm:ss') : null,
            useDate: ruleForm.useDate ? moment(ruleForm.useDate).format('YYYY-MM-DD HH:mm:ss') : null,
            validityDate: ruleForm.validityDate ? moment(ruleForm.validityDate).format('YYYY-MM-DD HH:mm:ss') : null,
          }

          console.log('最终提交数据:', payload)

          const res = await addSave(payload)
          console.log('新增成功', res)
          ElMessage.success('新增成功')
          dialogVisible.value = false
          getList()
        } catch (err) {
          console.error('新增失败:', err)
          ElMessage.error(err.response?.data?.msg || '新增失败，请检查数据')
        }
      } else {
        try {
          // 构造完整请求数据
          const payload = {
            ...ruleForm,
            modifiedOn: moment().format('YYYY-MM-DD HH:mm:ss'), // 添加修改时间
            produceDate: ruleForm.produceDate ? moment(ruleForm.produceDate).format('YYYY-MM-DD HH:mm:ss') : null,
            useDate: ruleForm.useDate ? moment(ruleForm.useDate).format('YYYY-MM-DD HH:mm:ss') : null,
            validityDate: ruleForm.validityDate ? moment(ruleForm.validityDate).format('YYYY-MM-DD HH:mm:ss') : null,
          }

          console.log('编辑提交数据:', payload)

        const res = await editSave(payload)
        console.log('编辑成功', res)
        ElMessage.success('编辑成功')
        dialogVisible.value = false
        getList()
      } catch (err) {
        console.error('编辑失败:', err)
        ElMessage.error(err.response?.data?.msg || '编辑失败，请检查数据')

        }
      }
    }
  })
}

// 新增模态框的选择容器型号模态框
function handleModel() {
  addEquipmentmodel(AddQuery).then(res => {
    console.log(res, '新增容器型号')
    modelList.value = res.page.list
    total2.value = res.page.totalCount
    dialogVisible2.value = true
  })
}
// 选择容器型号模态框查询
function searchModel() {
  AddQuery.key = input.value
  addEquipmentmodel(AddQuery).then(res => {
    // console.log(res, '新增容器型号')
    modelList.value = res.page.list
    total2.value = res.page.totalCount
  })
}
// 选择容器型号
function AddSelect(row: any) {
  console.log('选择容器型号', row)
  ruleForm.modeName = row.modeName
  ruleForm.equipmentModelId = row.id
  dialogVisible2.value = false

}
// 新增模态框的容器组模态框
function handleGroup() {
  addEquipmentgroup(AddQuery).then(res => {
    console.log('新增容器组', res,)
    groupList.value = res.page.list
    total3.value = res.page.totalCount
    dialogVisible3.value = true
  })
}

// 新增容器组查询
function searchGroup() {
  AddQuery.key = input2.value
  addEquipmentgroup(AddQuery).then(res => {
    // console.log(res, '新增容器型号')
    groupList.value = res.page.list
    total3.value = res.page.totalCount
  })
}

//选择容器组
function AddSelect2(row: any) {
  console.log('选择容器组', row)
  ruleForm.groupName = row.groupName
  ruleForm.equipmentGroupId = row.id
  dialogVisible3.value = false
}


// 页面加载完成后执行
onMounted(() => {
  getList()
})
// 打开冰箱跳转
function handleOpenFridge(id: string) {
  router.push({
    path: '/biosample/equipment-edit',
    query: { id }
  });
}
// 跳转容器组管理
function handleA() {
  try {
    router.push({
      path: '/biosample/equipmentgroup'
    }).catch(err => {
      console.error('路由跳转失败:', err);
    });
  } catch (error) {
    console.error('跳转出错:', error);
  }
}
// 跳转冻存架管理
function handleB() {
  try {
    router.push({
      path: '/biosample/forzenshelf'
    }).catch(err => {
      console.error('路由跳转失败:', err);
    });
  } catch (error) {
    console.error('跳转出错:', error);
  }
}
// 跳转冻存盒管理
function handleC() {
  try {
    router.push({
      path: '/biosample/forzenbox'
    }).catch(err => {
      console.error('路由跳转失败:', err);
    });
  } catch (error) {
    console.error('跳转出错:', error);
  }
}


// 删除
function handleDelete(id: any) {
  const prid = [id]
  ElMessageBox.confirm(`确认对[id=${id}]进行删除操作？`).then(() => {
    deleteEquipment(prid).then(res => {
      console.log(res, '///')
      ElMessage({
        message: "删除成功",
        type: 'success',
      })
      getList()
    })
  }).catch(() => {
    console.log('取消删除');
  });
}

const handleExport = () => {
  if (!equipmentList.value || equipmentList.value.length === 0) {
    ElMessage.warning('没有数据可导出')
    return
  }

  // CSV表头
  let csv = '设备名称,设备编码,品牌,型号,层数,列数,长宽高,冻存架数量,冻存盒数量,样本数量\n'

  // 添加数据行
  equipmentList.value.forEach(item => {
    csv += `"${item.name}","BS-${item.code}","${item.brand}","${item.equipmentModelName}",${item.rowNums},${item.columnNums},"${item.depth}*${item.width}*${item.height}",${item.shelfCnt},${item.boxCnt},${item.sampleCnt}\n`
  })

  // 创建Blob对象并下载
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)

  link.setAttribute('href', url)
  link.setAttribute('download', `设备列表_${new Date().toISOString().slice(0, 10)}.csv`)
  link.style.visibility = 'hidden'

  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)

  ElMessage.success('导出成功')
}

// 分页
// 切换条数
const sChange = (val: number) => {
  console.log(`切换为每页：${val}条`);
  query.limit = val
  getList()
}
// 切换页数
const pChange = (val: number) => {
  console.log(`第${val}页`);
  query.page = val
  getList()
}


</script>

<style scoped lang="scss">
.whole_top {
  margin: 0 auto;
  width: 100%;
}

.el-row {
  box-sizing: border-box;

}

.el-col-8 {
  width: 33.33333%;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.el-card {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: .3s;
}

.el-card,
.el-message {
  border-radius: 4px;
  overflow: hidden;
}

.el-card__body {
  padding: 20px;
}

[class*=el-col-] {
  float: left;
  box-sizing: border-box;
}

img {
  vertical-align: middle;
  border-style: none;
}

.el-col-16 {
  width: 66.66667%;
}

.el-col-24 {
  width: 100%;
}

.el-button-group>.el-button:not(:last-child) {
  margin-right: -1px;
}

.el-button-group>.el-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-button-group>.el-button {
  float: left;
  position: relative;
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 15px;
}

.el-button--mini,
.el-button--small {
  font-size: 12px;
  border-radius: 3px;
}


element.style {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

.el-button-group {
  display: inline-block;
  vertical-align: middle;
}

.el-button--primary {
  background-color: #17B3A3;
  border-color: #409eff;
  color: #fff;
}
</style>
